<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级图片裁剪工具 - 在线工具集合</title>
    <script src="../utils/toast.js"></script>
    <link rel="stylesheet" href="../utils/styles.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            min-height: 100vh;
            color: #fff;
            position: relative;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            background: linear-gradient(45deg, #00ff88, #00b4d8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .header p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.1em;
        }

        .cropper-section {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 24px;
            padding: 30px;
            margin-bottom: 30px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }

        .upload-area {
            border: 2px dashed rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 30px;
        }

        .upload-area:hover {
            border-color: #00ff88;
            background: rgba(255, 255, 255, 0.05);
        }

        .shape-selector {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .shape-btn {
            padding: 10px 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            cursor: pointer;
            transition: all 0.3s;
        }

        .shape-btn.active {
            background: #00ff88;
            color: #1a1a1a;
            border-color: #00ff88;
        }

        .draw-instructions {
            margin: 10px 0;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.8);
            display: none;
        }

        .draw-instructions.show {
            display: block;
        }

        .crop-container {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            cursor: crosshair;
        }

        .crop-area {
            position: relative;
            overflow: hidden;
        }

        .crop-area img {
            max-width: 100%;
            display: block;
        }

        .crop-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            pointer-events: none;
        }

        .crop-selection {
            position: absolute;
            border: 2px solid #00ff88;
            background: rgba(0, 255, 136, 0.1);
        }

        .crop-handle {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #00ff88;
            border-radius: 50%;
        }

        .crop-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
        .crop-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
        .crop-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
        .crop-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }

        .crop-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
            padding: 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
        }

        .option-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .option-group label {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9em;
        }

        .option-group input {
            width: 100%;
            padding: 8px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            color: #fff;
        }

        .action-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 30px;
        }

        .action-btn {
            padding: 15px 30px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(45deg, #00ff88, #00b4d8);
            color: #1a1a1a;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 255, 136, 0.2);
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 255, 136, 0.3);
        }

        .back-link {
            display: inline-block;
            margin-bottom: 20px;
            color: #00ff88;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .back-link:hover {
            transform: translateX(-5px);
        }

        @media (max-width: 768px) {
            .crop-options {
                grid-template-columns: 1fr;
            }

            .action-buttons {
                flex-direction: column;
            }

            .action-btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="../index.html" class="back-link">← 返回首页</a>
        
        <div class="header">
            <h1>高级图片裁剪工具</h1>
            <p>支持多种形状的专业裁剪方案</p>
        </div>

        <div class="cropper-section">
            <div class="upload-area" id="uploadArea">
                <div class="upload-text">点击或拖拽图片到这里</div>
                <input type="file" id="imageInput" accept="image/*" style="display: none;">
            </div>

            <div class="shape-selector">
                <button class="shape-btn active" data-shape="rectangle">矩形</button>
                <button class="shape-btn" data-shape="circle">圆形</button>
                <button class="shape-btn" data-shape="polygon">多边形</button>
                <button class="shape-btn" data-shape="custom">自由绘制</button>
            </div>

            <div class="draw-instructions" id="drawInstructions">
                多边形模式：点击添加顶点，双击完成绘制
                自由绘制模式：按住鼠标左键绘制，松开完成
            </div>

            <div class="crop-container">
                <div class="crop-area" id="cropArea">
                    <img id="sourceImage" style="display: none;">
                    <canvas id="overlayCanvas" style="position: absolute; top: 0; left: 0;"></canvas>
                </div>
            </div>

            <div class="crop-options">
                <div class="option-group" id="rectOptions">
                    <label>裁剪宽度 (px)</label>
                    <input type="number" id="cropWidth" min="1">
                </div>
                <div class="option-group" id="rectOptions">
                    <label>裁剪高度 (px)</label>
                    <input type="number" id="cropHeight" min="1">
                </div>
                <div class="option-group" id="circleOptions" style="display: none;">
                    <label>裁剪半径 (px)</label>
                    <input type="number" id="cropRadius" min="1">
                </div>
            </div>

            <div class="action-buttons">
                <button class="action-btn" id="cropBtn">裁剪图片</button>
                <button class="action-btn" id="resetBtn">重置选区</button>
                <button class="action-btn" id="downloadBtn">下载图片</button>
            </div>
        </div>
    </div>

    <script>
        const uploadArea = document.getElementById('uploadArea');
        const imageInput = document.getElementById('imageInput');
        const sourceImage = document.getElementById('sourceImage');
        const cropArea = document.getElementById('cropArea');
        const overlayCanvas = document.getElementById('overlayCanvas');
        const ctx = overlayCanvas.getContext('2d');
        const cropWidth = document.getElementById('cropWidth');
        const cropHeight = document.getElementById('cropHeight');
        const drawInstructions = document.getElementById('drawInstructions');
        const cropRadius = document.getElementById('cropRadius');
        const rectOptions = document.querySelectorAll('#rectOptions');
        const circleOptions = document.getElementById('circleOptions');

        let originalImage = null;
        let currentShape = 'rectangle';
        let isDrawing = false;
        let isMoving = false;
        let isResizing = false;
        let startX, startY;
        let points = [];
        let path = new Path2D();
        let shapeStartX, shapeStartY, shapeWidth, shapeHeight;
        let moveStartX, moveStartY;
        let activeControlPoint = null;
        let currentRadius = 0;

        // 形状选择处理
        document.querySelectorAll('.shape-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                document.querySelectorAll('.shape-btn').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                currentShape = btn.dataset.shape;
                resetCanvas();
                
                // 显示/隐藏绘制说明
                drawInstructions.classList.toggle('show', 
                    currentShape === 'polygon' || currentShape === 'custom');
                
                // 显示/隐藏对应的选项
                if (currentShape === 'circle') {
                    rectOptions.forEach(opt => opt.style.display = 'none');
                    circleOptions.style.display = 'flex';
                } else {
                    rectOptions.forEach(opt => opt.style.display = 'flex');
                    circleOptions.style.display = 'none';
                }
            });
        });

        // 文件处理
        uploadArea.addEventListener('click', () => imageInput.click());
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '#00ff88';
        });
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.style.borderColor = 'rgba(255, 255, 255, 0.2)';
        });
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            const file = e.dataTransfer.files[0];
            if (file && file.type.startsWith('image/')) {
                handleImage(file);
            }
        });

        imageInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                handleImage(file);
            }
        });

        function handleImage(file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                sourceImage.src = e.target.result;
                sourceImage.onload = () => {
                    sourceImage.style.display = 'block';
                    originalImage = new Image();
                    originalImage.src = e.target.result;
                    initializeCanvas();
                };
            };
            reader.readAsDataURL(file);
        }

        function initializeCanvas() {
            overlayCanvas.width = sourceImage.width;
            overlayCanvas.height = sourceImage.height;
            resetCanvas();
        }

        function resetCanvas() {
            ctx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
            ctx.fillRect(0, 0, overlayCanvas.width, overlayCanvas.height);
            points = [];
            path = new Path2D();
        }

        // 绘图事件处理
        overlayCanvas.addEventListener('mousedown', startDrawing);
        overlayCanvas.addEventListener('mousemove', draw);
        overlayCanvas.addEventListener('mouseup', stopDrawing);
        overlayCanvas.addEventListener('dblclick', finishPolygon);

        function isPointInShape(x, y) {
            if (!path) return false;
            
            // 保存当前上下文状态
            ctx.save();
            
            // 创建一个新的路径用于检测
            let testPath = new Path2D(path);
            
            // 检查点是否在路径内
            const isInside = ctx.isPointInPath(testPath, x, y);
            
            // 恢复上下文状态
            ctx.restore();
            
            return isInside;
        }

        function startDrawing(e) {
            if (!originalImage) return;

            const rect = overlayCanvas.getBoundingClientRect();
            startX = (e.clientX - rect.left) * (overlayCanvas.width / rect.width);
            startY = (e.clientY - rect.top) * (overlayCanvas.height / rect.height);

            // 检查是否点击了控制点
            if (currentShape === 'rectangle') {
                const controlPoints = [
                    { id: 'nw', x: shapeStartX, y: shapeStartY },
                    { id: 'ne', x: shapeStartX + shapeWidth, y: shapeStartY },
                    { id: 'sw', x: shapeStartX, y: shapeStartY + shapeHeight },
                    { id: 'se', x: shapeStartX + shapeWidth, y: shapeStartY + shapeHeight }
                ];

                for (const point of controlPoints) {
                    const dx = startX - point.x;
                    const dy = startY - point.y;
                    if (Math.sqrt(dx * dx + dy * dy) < 10) {
                        isResizing = true;
                        activeControlPoint = point.id;
                        return;
                    }
                }
            }

            // 检查是否在已有形状内点击（用于移动功能）
            if (path && isPointInShape(startX, startY) && currentShape !== 'custom') {
                isMoving = true;
                moveStartX = startX - shapeStartX;
                moveStartY = startY - shapeStartY;
                return;
            }

            switch (currentShape) {
                case 'polygon':
                    points.push({ x: startX, y: startY });
                    if (points.length === 1) {
                        path.moveTo(startX, startY);
                    } else {
                        path.lineTo(startX, startY);
                    }
                    break;
                case 'custom':
                    isDrawing = true;
                    resetCanvas();
                    path = new Path2D();
                    path.moveTo(startX, startY);
                    points = [{ x: startX, y: startY }];
                    break;
                default:
                    isDrawing = true;
                    shapeStartX = startX;
                    shapeStartY = startY;
                    resetCanvas();
            }
            drawShape();
        }

        function draw(e) {
            if (!originalImage) return;

            const rect = overlayCanvas.getBoundingClientRect();
            const currentX = (e.clientX - rect.left) * (overlayCanvas.width / rect.width);
            const currentY = (e.clientY - rect.top) * (overlayCanvas.height / rect.height);

            if (isResizing && currentShape === 'rectangle') {
                const dx = currentX - startX;
                const dy = currentY - startY;

                switch (activeControlPoint) {
                    case 'nw':
                        shapeWidth -= dx;
                        shapeHeight -= dy;
                        shapeStartX += dx;
                        shapeStartY += dy;
                        break;
                    case 'ne':
                        shapeWidth += dx;
                        shapeHeight -= dy;
                        shapeStartY += dy;
                        break;
                    case 'sw':
                        shapeWidth -= dx;
                        shapeHeight += dy;
                        shapeStartX += dx;
                        break;
                    case 'se':
                        shapeWidth += dx;
                        shapeHeight += dy;
                        break;
                }

                // 确保尺寸不为负
                if (shapeWidth < 0) {
                    shapeStartX += shapeWidth;
                    shapeWidth = Math.abs(shapeWidth);
                }
                if (shapeHeight < 0) {
                    shapeStartY += shapeHeight;
                    shapeHeight = Math.abs(shapeHeight);
                }

                // 更新起始点位置
                startX = currentX;
                startY = currentY;

                // 更新尺寸输入框
                cropWidth.value = Math.round(Math.abs(shapeWidth));
                cropHeight.value = Math.round(Math.abs(shapeHeight));

                resetCanvas();
                drawRectangle(shapeStartX + shapeWidth, shapeStartY + shapeHeight, true);
                return;
            }

            if (isMoving && currentShape !== 'custom') {
                const newX = currentX - moveStartX;
                const newY = currentY - moveStartY;
                
                // 确保圆形不会移出画布范围
                if (currentShape === 'circle') {
                    shapeStartX = Math.max(currentRadius, Math.min(newX, overlayCanvas.width - currentRadius));
                    shapeStartY = Math.max(currentRadius, Math.min(newY, overlayCanvas.height - currentRadius));
                    drawCircle(currentX, currentY, true);
                } else {
                    // 确保不会移出画布范围
                    shapeStartX = Math.max(0, Math.min(newX, overlayCanvas.width - shapeWidth));
                    shapeStartY = Math.max(0, Math.min(newY, overlayCanvas.height - shapeHeight));
                    
                    resetCanvas();
                    if (currentShape === 'rectangle') {
                        drawRectangle(shapeStartX + shapeWidth, shapeStartY + shapeHeight, true);
                    } else if (currentShape === 'polygon') {
                        // 移动多边形
                        const dx = shapeStartX - (currentX - moveStartX);
                        const dy = shapeStartY - (currentY - moveStartY);
                        path = new Path2D();
                        path.moveTo(points[0].x - dx, points[0].y - dy);
                        for (let i = 1; i < points.length; i++) {
                            path.lineTo(points[i].x - dx, points[i].y - dy);
                        }
                        path.closePath();
                    }
                }
                drawShape();
                return;
            }

            if (!isDrawing) return;

            switch (currentShape) {
                case 'rectangle':
                    resetCanvas();
                    drawRectangle(currentX, currentY);
                    break;
                case 'circle':
                    resetCanvas();
                    drawCircle(currentX, currentY);
                    break;
                case 'custom':
                    // 添加新的点到路径
                    path.lineTo(currentX, currentY);
                    points.push({ x: currentX, y: currentY });
                    drawShape();
                    break;
            }
        }

        function stopDrawing() {
            if (currentShape === 'custom' && isDrawing) {
                // 完成自由绘制，闭合路径
                if (points.length > 2) {
                    path.closePath();
                    drawShape();
                }
            }
            
            isDrawing = false;
            isMoving = false;
            isResizing = false;
            activeControlPoint = null;
            
            // 更新尺寸输入框
            if (currentShape === 'rectangle') {
                cropWidth.value = Math.abs(Math.round(shapeWidth));
                cropHeight.value = Math.abs(Math.round(shapeHeight));
            }
        }

        function finishPolygon() {
            if (currentShape === 'polygon' && points.length > 2) {
                path.closePath();
                drawShape();
                points = [];
            }
        }

        function drawShape() {
            ctx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
            ctx.fillRect(0, 0, overlayCanvas.width, overlayCanvas.height);
            
            ctx.save();
            ctx.strokeStyle = '#00ff88';
            ctx.lineWidth = 2;
            
            if (currentShape === 'custom' && isDrawing) {
                // 绘制自由绘制的路径
                ctx.beginPath();
                ctx.moveTo(points[0].x, points[0].y);
                for (let i = 1; i < points.length; i++) {
                    ctx.lineTo(points[i].x, points[i].y);
                }
                ctx.stroke();
                
                // 创建裁剪区域
                ctx.globalCompositeOperation = 'destination-out';
                ctx.fill();
            } else {
                ctx.stroke(path);
                ctx.globalCompositeOperation = 'destination-out';
                ctx.fill(path);
            }
            
            // 绘制控制框和标注
            if (currentShape === 'rectangle') {
                ctx.globalCompositeOperation = 'source-over';
                // 绘制四个角的控制点
                const controlPoints = [
                    { x: shapeStartX, y: shapeStartY },
                    { x: shapeStartX + shapeWidth, y: shapeStartY },
                    { x: shapeStartX, y: shapeStartY + shapeHeight },
                    { x: shapeStartX + shapeWidth, y: shapeStartY + shapeHeight }
                ];
                
                controlPoints.forEach(point => {
                    ctx.beginPath();
                    ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
                    ctx.fillStyle = '#00ff88';
                    ctx.fill();
                });
                
                // 绘制尺寸标注
                ctx.font = '12px Arial';
                ctx.fillStyle = '#fff';
                ctx.fillText(`${Math.abs(Math.round(shapeWidth))}px`, shapeStartX + shapeWidth/2 - 20, shapeStartY - 10);
                ctx.fillText(`${Math.abs(Math.round(shapeHeight))}px`, shapeStartX - 30, shapeStartY + shapeHeight/2);
            } else if (currentShape === 'circle') {
                ctx.globalCompositeOperation = 'source-over';
                
                // 绘制圆心点
                ctx.beginPath();
                ctx.arc(shapeStartX, shapeStartY, 5, 0, Math.PI * 2);
                ctx.fillStyle = '#00ff88';
                ctx.fill();
                
                // 绘制半径控制点
                const angle = Math.atan2(shapeHeight, shapeWidth);
                const controlX = shapeStartX + currentRadius * Math.cos(angle);
                const controlY = shapeStartY + currentRadius * Math.sin(angle);
                
                // 绘制半径线
                ctx.beginPath();
                ctx.moveTo(shapeStartX, shapeStartY);
                ctx.lineTo(controlX, controlY);
                ctx.strokeStyle = '#00ff88';
                ctx.stroke();
                
                // 绘制控制点
                ctx.beginPath();
                ctx.arc(controlX, controlY, 5, 0, Math.PI * 2);
                ctx.fillStyle = '#00ff88';
                ctx.fill();
                
                // 绘制半径标注
                ctx.font = '12px Arial';
                ctx.fillStyle = '#fff';
                ctx.fillText(`R: ${Math.round(currentRadius)}px`, shapeStartX + 10, shapeStartY - 10);
            }
            
            ctx.restore();
        }

        function drawRectangle(currentX, currentY, isMoving = false) {
            if (!isMoving) {
                shapeWidth = currentX - startX;
                shapeHeight = currentY - startY;
            }
            
            path = new Path2D();
            path.rect(shapeStartX, shapeStartY, shapeWidth, shapeHeight);
            drawShape();
        }

        function drawCircle(currentX, currentY, isMoving = false) {
            if (!isMoving) {
                const dx = currentX - shapeStartX;
                const dy = currentY - shapeStartY;
                currentRadius = Math.sqrt(dx * dx + dy * dy);
            }
            
            path = new Path2D();
            path.arc(shapeStartX, shapeStartY, currentRadius, 0, Math.PI * 2);
            drawShape();

            // 更新半径输入框
            if (currentShape === 'circle') {
                cropRadius.value = Math.round(currentRadius);
            }
        }

        // 裁剪功能
        document.getElementById('cropBtn').addEventListener('click', () => {
            if (!originalImage) {
                toast.error('请先上传图片');
                return;
            }

            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = overlayCanvas.width;
            canvas.height = overlayCanvas.height;

            // 绘制原始图片
            ctx.drawImage(originalImage, 0, 0);

            // 应用裁剪路径
            ctx.globalCompositeOperation = 'destination-in';
            ctx.fill(path);

            // 更新预览
            sourceImage.src = canvas.toDataURL('image/png');
            resetCanvas();
            toast.success('裁剪成功');
        });

        // 重置功能
        document.getElementById('resetBtn').addEventListener('click', () => {
            if (originalImage) {
                sourceImage.src = originalImage.src;
                resetCanvas();
                toast.success('已重置');
            }
        });

        // 下载功能
        document.getElementById('downloadBtn').addEventListener('click', () => {
            if (!sourceImage.src) {
                toast.error('请先上传图片');
                return;
            }

            const link = document.createElement('a');
            link.download = 'cropped_image.png';
            link.href = sourceImage.src;
            link.click();
            toast.success('开始下载');
        });

        // 添加尺寸输入框事件监听
        cropWidth.addEventListener('input', updateShapeFromInputs);
        cropHeight.addEventListener('input', updateShapeFromInputs);

        function updateShapeFromInputs() {
            if (!originalImage || currentShape !== 'rectangle') return;
            
            const width = parseInt(cropWidth.value) || 0;
            const height = parseInt(cropHeight.value) || 0;
            
            // 确保不会超出画布范围
            shapeWidth = Math.min(width, overlayCanvas.width - shapeStartX);
            shapeHeight = Math.min(height, overlayCanvas.height - shapeStartY);
            
            resetCanvas();
            drawRectangle(shapeStartX + shapeWidth, shapeStartY + shapeHeight, true);
        }

        // 添加半径输入框事件监听
        cropRadius.addEventListener('input', updateCircleFromRadius);

        function updateCircleFromRadius() {
            if (!originalImage || currentShape !== 'circle') return;
            
            const radius = parseInt(cropRadius.value) || 0;
            currentRadius = radius;
            
            // 确保圆形不会超出画布范围
            shapeStartX = Math.max(currentRadius, Math.min(shapeStartX, overlayCanvas.width - currentRadius));
            shapeStartY = Math.max(currentRadius, Math.min(shapeStartY, overlayCanvas.height - currentRadius));
            
            resetCanvas();
            drawCircle(shapeStartX + currentRadius, shapeStartY, true);
        }

        // 修改鼠标样式处理
        overlayCanvas.addEventListener('mousemove', (e) => {
            if (isDrawing || isMoving || isResizing) return;
            
            const rect = overlayCanvas.getBoundingClientRect();
            const x = (e.clientX - rect.left) * (overlayCanvas.width / rect.width);
            const y = (e.clientY - rect.top) * (overlayCanvas.height / rect.height);
            
            if (currentShape === 'rectangle') {
                // 检查是否在控制点上
                const controlPoints = [
                    { id: 'nw', x: shapeStartX, y: shapeStartY, cursor: 'nw-resize' },
                    { id: 'ne', x: shapeStartX + shapeWidth, y: shapeStartY, cursor: 'ne-resize' },
                    { id: 'sw', x: shapeStartX, y: shapeStartY + shapeHeight, cursor: 'sw-resize' },
                    { id: 'se', x: shapeStartX + shapeWidth, y: shapeStartY + shapeHeight, cursor: 'se-resize' }
                ];

                for (const point of controlPoints) {
                    const dx = x - point.x;
                    const dy = y - point.y;
                    if (Math.sqrt(dx * dx + dy * dy) < 10) {
                        overlayCanvas.style.cursor = point.cursor;
                        return;
                    }
                }
            }
            
            // 检查是否在形状内
            if (path && isPointInShape(x, y)) {
                overlayCanvas.style.cursor = 'move';
            } else {
                overlayCanvas.style.cursor = 'crosshair';
            }
        });
    </script>
</body>
</html> 